<template>
  <div id="hotList">
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button type="success" icon="el-icon-plus" @click="addBtn">
        新增
      </el-button>
      <el-button type="warning" icon="el-icon-upload2" @click="importBtn">
        导入
      </el-button>
      <el-button type="warning" plain @click="deleteSome">
        批量删除
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      height="490"
      @selection-change="selectChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="60" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="category" label="等级" width="100">
        <template slot-scope="scope">
          <span
            v-if="scope.row.category"
            class="tag-span"
            :class="scope.row.category | filterClass('levelType')"
            >{{ scope.row.category | filterName('levelType') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="college" label="所属学院" width="100">
        <template slot-scope="scope">
          <span
            v-if="scope.row.college"
            class="tag-span"
            :class="scope.row.college | filterClass('shareCollegeType')"
            >{{ scope.row.college | filterName('shareCollegeType') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="type" label="内容类型" width="100">
        <template slot-scope="scope">
          <span
            v-if="scope.row.type"
            class="tag-span"
            :class="scope.row.type | filterClass('shareType')"
            >{{ scope.row.type | filterName('shareType') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        min-width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createByName"
        label="创建者"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="100"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="90">
        <template slot-scope="scope">
          <el-button type="text" @click="deleteOne(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增弹窗 -->
    <addDialog
      v-if="addDialogData.isShow"
      :add-dialog-data="addDialogData"
      @refresh="refresh"
    ></addDialog>
    <!-- 导入弹窗 -->
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @refresh="refresh"
      @showError="showError"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      from="commitWord"
    ></errorDialog>
  </div>
</template>
<script>
import {
  getSearchList,
  batchRemove,
  deleteReq,
  importUrl,
  downUrl
} from '@/api/commentManagement/commentManage' // 接口
import topSearch from '@component/commentManagement/commentManage/topSearch' // 上部搜索条件
import addDialog from '@component/commentManagement/commentManage/addDialog' // 添加弹窗
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗
export default {
  name: 'commentManage',
  msg: '评论库管理',
  components: {
    topSearch,
    addDialog,
    importDialog,
    errorDialog
  },
  data() {
    return {
      loading: true,
      total: 0,
      // 搜索条件
      formInline: {
        category: '', // 等级,默认所有
        college: '', // 所属学院,默认所有
        type: '', // 内容类型,默认所有
        content: '' // 搜索框内容
      },
      // 表格数据
      tableData: [],
      // 多选删除按钮是否可用
      isDisabled: true,
      // 已经选中的行数据
      selectData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 页面显示条数
        orderByColumn: 'createTime', // 排序字段
        isAsc: 'desc' // 正序倒序
      },
      // 传递给添加弹窗的数据
      addDialogData: {
        isShow: false, // 控制显示
        params: '' // 传递的参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '创建评论库',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      }
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    // 获取列表
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 导入按钮点击事件
    importBtn() {
      this.importDialogData.url = importUrl() // 导入接口
      this.importDialogData.downUrl = downUrl() // 下载模板接口
      this.importDialogData.isShow = true
    },
    /* 导入失败弹窗 */
    showError(text) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
    },
    // 选择框改变事件
    selectChange(value) {
      this.selectData = value
      this.isDisabled = !(this.selectData.length > 0)
    },
    // 多选删除按钮
    deleteSome() {
      if (this.selectData.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认要删除选中的${this.selectData.length}条数据吗？`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        if (this.selectData.length === 1) {
          ids[0] = this.selectData[0].id
          this.delItem(ids)
        } else {
          this.selectData.forEach((item) => {
            ids.push(item.id)
          })
          this.delMulRequest(ids)
        }
      })
    },
    // 单选删除按钮
    deleteOne(id) {
      this.$confirm(`确定要删除该条评论库信息吗？`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delItem([id])
      })
    },
    /* 删除单个请求 */
    delItem(ids) {
      deleteReq(
        ids,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 删除多个请求 */
    delMulRequest(ids) {
      let params = { ids }
      batchRemove(
        params,
        (response) => {
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    // 添加按钮点击事件
    addBtn() {
      this.addDialogData.isShow = true
    },
    /* 新增后，刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>
<style lang="less" scoped>
.el-table {
  margin-top: 20px;
}
</style>
